<template>
  <div id="menu">
    <el-menu :default-active="activeIndex" :background-color="menu_color" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">
      <a href="/bin/surong">Aurora</a> 用户中心
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">财务管理</template>
      <el-menu-item index="2-1">财务账单</el-menu-item>
      <el-menu-item index="2-2">财务计划</el-menu-item>
      <el-menu-item index="2-3">事务管理</el-menu-item>
    </el-submenu>
    <el-menu-item index="3"><a href="javascript:;">我的日志</a></el-menu-item>
    <el-submenu index="4">
      <template slot="title">{{user}}</template>
      <el-menu-item index="4-1">我的主页</el-menu-item>
      <el-menu-item index="4-2">注销登录</el-menu-item>
    </el-submenu>
    <el-menu-item index="5">
      <el-color-picker v-model="color" size="medium" @change="whenSetColor"></el-color-picker>
    </el-menu-item>
  </el-menu>
  </div>
</template>

<script>
  // 公共js函数库
  import SuStorage from '../surong/storage.js'
  var indexStrg = new SuStorage('__ar_center_idx')
  export default {
    data() {
      return {
        activeIndex: _Aurora.menu_idx? _Aurora.menu_idx:'1',
        user : _Aurora.user,
        menu_color: indexStrg.Get('color'),
        color: indexStrg.Get('color')
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        switch(key){
          case '2-1':location.href = '/finance/account';break;
          case '2-2':location.href = '/finance/plan';break;
          case '2-3':location.href = '/finance/affair';break;
          case '3':location.href = '/mylog';break;
          case '4-1': location.href = '/';break;
          case '4-2':
            this.$confirm('您确定要退出系统吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              location.href = '/login/quit';
            }).catch(() => {});
            break;
        }
      },
      // 改变颜色码时
      whenSetColor(cHex){
        indexStrg.Set('color', cHex, true);
        this.menu_color = cHex;
      }
    }
  }
</script>